<template>
    <div style="height:100%;width:100%;" class="detail">
        <top-bar v-if="isSearch" class="bar" @on-back="$router.back()" :title="label">
            <div slot="right"></div>
        </top-bar>
        <div v-if="!isSearch" class="detail-bar" style="background:#44b549;color:white">
            <span style="flex:1; text-align:center">{{label}}</span>
            <div class="detail-bar-right">
                <span @click="searchBox">筛选</span>
            </div>
        </div>
        <div class="detail-bar" style="color: #817c7c;">
            <div>{{time}}</div>
            <i class="iconfont icon-rili" style="font-size:20px;text-align:right;flex:1" @click="handleTime"></i>
        </div>
        <scroll style="height: calc(100% - 142px)"
                :total="total"
                @on-infinite="getData">
            <group class="detail-block">
                <cell-box class="detail-block-box vux-tap-active" v-for="(item, index) in orderList" :key="item.name"
                          @click.native="$router.push({path: '/detailOnly/' + index, query:{type: 1}})"
                          :is-link="false">
                    <div class="detail-cell-box">
                        <div class="detail-box-left" style="display:flex">
                            <div style="margin-left: 10px">
                                <div>{{item.cardId + "["+ item.cardName + "]"}}</div>
                                <div class="detail-left-time">{{item.createTime}}</div>
                            </div>
                        </div>
                        <div class="detail-box-right" style="color: black;">
                            <div style="line-height:27px">￥{{item.amount}}</div>
                            <div style="line-height:27px">{{item.fuelCharge}}L</div>
                        </div>
                    </div>
                </cell-box>
            </group>
        </scroll>
        <bar selected="detail"></bar>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../store/constants.vue'
    import scroll from '../../components/scroll.vue'
    import {
        Bar
    } from 'muka-ui'
    import {
        Group,
        Cell,
        CellBox,
        Tab,
        TabItem
    } from 'vux'
    import bar from '../../components/bar.vue'

    export default {
        name: 'dataCenter',
        components: {
            Group,
            Cell,
            CellBox,
            bar,
            Tab,
            TabItem,
            scroll,
            'topBar': Bar
        },
        data: function () {
            return {
                //分页查询
                pageNum: 1,
                total: 0,
                detail: [],
                cardId: '',
                tankerId: '',
                isSearch: false,


                showSearch: false,
                searchText: '',
                select: 1,
                num: 1,
                time: '',
                buy: false,
                buyI: false,
                label: '订单管理',
            }
        },
        created: function () {

            Date.prototype.format = function (partten) {
                if (partten === null || partten === '') {
                    partten = 'y-m-d'
                }
                let y = this.getFullYear()
                let m = this.getMonth() + 1
                let d = this.getDate()
                let r = partten.replace(/y+/gi, y)
                r = r.replace(/m+/gi, (m < 10 ? '0' : '') + m)
                r = r.replace(/d+/gi, (d < 10 ? '0' : '') + d)
                return r
            }
            let date = new Date()
            this.time = date.format('y-m')
            this.updateOrderList([])
            if (this.$route.query.cardId) {
                this.cardId = this.$route.query.cardId
                this.isSearch = true
                this.label = this.cardId
            }

            if (this.$route.query.tankerId) {
                this.tankerId = this.$route.query.tankerId
                this.isSearch = true
                this.label = this.tankerId
            }

            this.getData(1)
        },
        amounted: function () {
            console.log(this.$refs)
        },
        watch: {
            searchText: function (newVal, oldVal) {
                if (newVal !== oldVal) this.buy = false
            }
        },
        computed: mapState([
            VUEX_NAME.orderList,
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.updateOrderList,
            ]),
            getData: function (pageNum, done) {
                this.$ajax(
                    'order/fuelOrderPlus',
                    {
                        cardId: this.cardId,
                        tankerId: this.tankerId,
                        month: this.time,
                        pageNum: pageNum,
                        pageSize: 20
                    },
                    (content) => {
                        this.total = content.totalCount
                        this.updateOrderList(this.orderList.concat(content.resultList))

                        if (done) {
                            done()
                        }
                    })
            },


            //根据日期查询
            handleTime: function () {
                this.$vux.datetime.show({
                    cancelText: '取消',
                    confirmText: '确定',
                    format: 'YYYY-MM',
                    value: this.time,
                    onConfirm: (val) => {
                        this.updateOrderList([])
                        this.time = val
                        this.getData(1)
                    },

                })
            },
            searchBox: function () {
                this.$router.push('/detailSearch')
            },
        }
    }

</script>

<style>


</style>
